<template>
  <div class="bigbox">
    <div class="head">
      <div>{{ list.name }}的直播间</div>
      <div>{{ list.title }}</div>
      <div></div>
    </div>
    <div class="mianzhong">
      <div class="miannum">
        <div class="count">
          <div>当前观看人数：{{ list.gknum }}</div>
          <div>当前关注人数：{{ list.gznum }}</div>
          <div>当前点赞人数：{{ list.dznum }}</div>
          <div>当前下单人数：{{ list.xdnum }}</div>
        </div>
        <div>
          <!--开启摄像头-->
          <!-- <Button type="primary" @click="callCamera" style="margin-right: 10px;"
            >开启摄像头</Button
          > -->
          <!--canvas截取流-->
          <!--图片展示-->
          <video
            class="wesd"
            ref="video"
            width="100%"
            height="100%"
            autoplay
          ></video>

          <div class="prism-player" id="player-con"></div>
        </div>
        <div></div>
      </div>
      <div class="Forcedclosure">
        <div class="fanhui" @click="goshangceng">返回</div>
        <div class="cllll" @click="closeCamera">强制关闭</div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  //import引入的组件需要注入到对象中才能使用
  components: {},
  data() {
    //这里存放数据
    return {
      list: []
    };
  },
  //监听属性 类似于data概念
  computed: {},
  //监控data中的数据变化
  watch: {},
  //方法集合
  methods: {},
  //生命周期 - 创建完成（可以访问当前this实例）
  created() {
    this.list = this.$route.query.list;
    console.log(this.list);
  },

  mounted: function() {
    this.getListCZ();
    this.callCamera(); //需要触发的函数
  },
  methods: {
    goshangceng() {
      this.$router.go(-1);
    },
    // 调用摄像头
    callCamera() {
      // H5调用电脑摄像头API
      navigator.mediaDevices
        .getUserMedia({
          video: true
        })
        .then(success => {
          // 摄像头开启成功
          this.$refs["video"].srcObject = success;
          // 实时拍照效果
          this.$refs["video"].play();
        });
    },
    // 关闭摄像头
    closeCamera() {
      if (!this.$refs["video"].srcObject) return;
      let stream = this.$refs["video"].srcObject;
      let tracks = stream.getTracks();
      tracks.forEach(track => {
        track.stop();
      });
      this.$refs["video"].srcObject = null;
    },
    getListCZ() {
      new Aliplayer(
        {
          id: "player-con",
          source:
            "http://mbo.liwanyi521.top/douyu/76753255.flv?auth_key=1618559168-0-0-6311656d9e2df64f41020bea84fa9dd9",
          width: "100%",
          height: "450px",
          autoplay: true,
          isLive: false,
          rePlay: false,
          playsinline: true,
          preload: true,
          controlBarVisibility: "hover",
          useH5Prism: true
        },
        function(player) {
          console.log("The player is created");
        }
      );
    }
  }
};
</script>

<style lang="scss" scoped>
.bigbox {
  width: 100%;
  height: 100%;
  padding: 10px;
}
.head {
  width: 100%;
  height: 40px;
  background-color: #434343;
  display: flex;
  justify-content: space-between;
  padding-left: 10px;
  padding-right: 100px;
  color: #fff;
  align-items: center;
  line-height: 40px;
}
video {
  width: 450px;
  height: 300px;
  border: 1px solid #ccc;
}
// canvas {
//   width: 300px;
//   height: 300px;
//   border: 1px solid red;
// }
.mianzhong {
  width: 100%;
  height: 500px;
  // background-color: #2d2d2d;
  .miannum {
    display: flex;
    justify-content: space-around;
    padding-right: 150px;
    .count {
      margin-top: 30px;
      color: #5383b2;
      div {
        margin-top: 20px;
      }
    }
  }
  .Forcedclosure {
    display: flex;
    margin-left: 41%;
    margin-top: 30px;
    div {
      width: 100px;
      height: 40px;
      text-align: center;
      line-height: 40px;
      color: #fff;
    }
    .fanhui {
      background-color: #fc5659;
    }
    .cllll {
      margin-left: 30px;
      cursor: pointer;
      border: 1px solid #fc5659;
      color: #434343;
    }
  }
}
</style>
